import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';

import error from '../../../../assets/imgs/test/error.png'
import waring from '../../../../assets/imgs/test/waring.png'
import {IEmergencyrType} from "../../../../type/firstType";
import ModalText from "../../../../components/ModalText";


interface IProps {
    borderBottom: string
    borderTop: string
    LogisticsArr: any
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {borderBottom, borderTop, LogisticsArr} = this.props
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    <span className={styles.spanWidth} title="prq号"><ModalText text='prq号' long={10} /></span>
                    <span className={styles.spanWidth} title="运单号"><ModalText text='运单号' long={10} /></span>
                    <span className={styles.spanWidth} title="状态描述"><ModalText text='状态描述' long={10} /></span>
                    <span className={styles.spanWidth} title="起始地"><ModalText text='起始地' long={10} /></span>
                    <span className={styles.spanWidth} title="取件时间"><ModalText text='取件时间' long={10} /></span>
                    <span className={styles.spanWidth} title="完成派送时间"><ModalText text='完成派送时间' long={10} /></span>
                    <span className={styles.spanWidth} title="目的地"><ModalText text='目的地' long={10} /></span>
                    {/*<div className={styles.title8}>more</div>*/}
                </div>
                <div className={styles.swiperC}>
                    {
                        LogisticsArr.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={6} autoplaySpeed={2000}>
                            {
                                LogisticsArr.map((item, index) => {
                                    return (
                                        <div key={`itemLTBT_${index}`} className={index % 2 === 0 ? styles.list1 : styles.list}>
                                            <div className={styles.listC}>
                                                <span className={styles.spanWidth} title={item.prqCode}><ModalText text={item.prqCode}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.waybillno}><ModalText text={item.waybillno}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.statusDes}><ModalText text={item.statusDes}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.origCity}><ModalText text={item.origCity}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.pickupTime}><ModalText
                                                    text={item.pickupTime} long={10} /></span>
                                                <span className={styles.spanWidth} title={item.deliveryTime}><ModalText text={item.deliveryTime}
                                                                                              long={10} /></span>
                                                <span className={styles.spanWidth} title={item.destCity}><ModalText text={item.destCity}
                                                                                              long={10} /></span>
                                                {/*<div className={styles.item8}>查询所有</div>*/}
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
